<template>
  <div>
    <!-- 侧边导航++++++++++++++++++++++ -->
    <el-menu :router=true :default-active="defaultActive" class="elmenu" background-color="#FFFFFF" text-color="#002224" active-text-color="#fff" :default-openeds="defaultOpeneds" @select="handleMenuSelect">

      <div class=" center logon" style="padding: 20px;">
        <img class="cursor" style="width: 152px;height: 38px;" src="@/assets/images/logo.png" @click="toUrl('/center/dataAnalysis')" />
      </div>


      <el-menu-item index="/center/dataAnalysis" class="item_nav" v-if="datum__list">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/sjyl.png" />
          <span>数据一览</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/center/noticeList" class="item_nav" v-if="notice__list">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/message.png" />
          <span>公告列表</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/center/updateLog" class="item_nav" v-show="log__update">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/rizi.png" />
          <span>更新日志</span>
        </template>
      </el-menu-item>

      <el-submenu index="1" class="item_nav" v-if="game">
        <template slot="title" v-if="game">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/htgl.png" />
          <span>游戏管理</span>
        </template>
        <el-menu-item v-if="game__databaseCon" index="/center/databaseCon">申请测试</el-menu-item>
        <el-menu-item v-if="game__officialList" index="/center/officialList">版本列表</el-menu-item>
        <el-menu-item v-if="game__playerRechargeRecord" index="/center/playerRechargeRecord">充值记录</el-menu-item>
      </el-submenu>

      <el-submenu index="2" class="item_nav" v-if="finance">
        <template slot="title" v-if="finance">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/sj.png" />
          <span>财务管理</span>
        </template>

        <el-menu-item index="/center/settlementInformation" v-if="finance__settlementInformation">财务记录</el-menu-item>
        <el-menu-item index="/center/contract" v-if="finance__contract">合同管理</el-menu-item>
        <el-menu-item index="/center/invoice" v-if="finance__invoice">发票管理</el-menu-item>
      </el-submenu>


      <el-submenu index="3" class="item_nav" v-if="technical">
        <template slot="title" v-if="technical">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/jszc.png" />
          <span>技术支持</span>
        </template>

        <el-menu-item v-if="technical__problem" index="/center/problem">常见问题</el-menu-item>

        <!-- <el-menu-item v-if="technical__menuPerm"  index="">使用手册</el-menu-item> -->
        <el-menu-item v-if="technical__menuPerm" @click="toWai()" index="">使用手册</el-menu-item>


        <el-menu-item v-if="technical__workSub" index="/center/workSub" @click="handleWorkSubClick">

          <div class="row_a_c">
            <div style="font-size: 14px;">工单管理</div>
            <i v-if="message_show" style="color: red;margin-left: 10px;font-size: 22px;" class="el-icon-chat-dot-round"></i>
          </div>
        </el-menu-item>

        <el-menu-item v-if="technical__videoCourse" index="/center/videoCourse">视频教程</el-menu-item>

      </el-submenu>


      <el-menu-item index="/center/manpowerResource" class="item_nav" v-if="manpower__resource">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/rlzy.png" />
          <span>人力资源</span>
        </template>
      </el-menu-item>

      <el-submenu index="4" class="item_nav" v-if="account">
        <template slot="title" v-if="account">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/sz.png" />
          <span>账号设置</span>
        </template>
        <el-menu-item index="/center/bypassAccount" v-if="account__bypass">子账号管理</el-menu-item>
        <el-menu-item index="/center/personalm" v-if="account__personalm">账号信息</el-menu-item>
        <el-menu-item index="/center/PersonalCertificate" v-if="account__certificate">实名认证</el-menu-item>
      </el-submenu>

      <el-menu-item class="item_nav" @click="logout">
        <template slot="title">
          <img style="height: 20px;width: 20px;margin-right: 10px;" src="@/assets/images/tc.png" />
          <span>退出系统</span>
        </template>
      </el-menu-item>

    </el-menu>
    <!-- 侧边导航=============== -->



  </div>
</template>

<script>
  import * as Work from "@/api/operation/work";
  import * as UserPermission from "@/api/system/user_permission";
  import {
    getToken,
    setToken,
    removeToken
  } from '@/utils/auth';
  export default {
    name: 'Sidebar',
    props: {
      defaultActive: {
        type: String,
        default: '/center/dataAnalysis'
      }
    },
    data() {
      return {
        mm: 1,
        showMenu: true,
        activeMenu: '/center/dataAnalysis',
        defaultOpeneds: ['1', '2', '3', '4'], // 默认展开的菜单项
        game_id: '',
        game_name: '',
        game_logo: '',
        userId: '',
        pid: '',
        audit_status: '', //审核状态，1：未提交，2：已提交 3：审核通过 4：审核失败
        message_show: false,


        datum: false, //数据管理
        datum__list: false, //数据一览

        notice: false, //公告管理
        notice__list: false, //公告列表

        log: false, //日志管理
        log__update: false, //更新日志

        game: false, //游戏管理
        game__databaseCon: false, //申请测试
        game__officialList: false, //版本列表
        game__playerRechargeRecord: false, //充值记录

        finance: false, //财务管理
        finance__settlementInformation: false, //财务记录
        finance__contract: false, //合同管理
        finance__invoice: false, //发票管理

        technical: false, //技术支持
        technical__problem: false, //常见问题
        technical__menuPerm: false, //使用手册
        technical__workSub: false, //工单管理
        technical__videoCourse: false, //视频教程


        manpower: false, //资源管理
        manpower__resource: false, //人力资源

        account: false, //账号设置
        account__bypass: false, //子账号管理
        account__personalm: false, //账号信息
        account__certificate: false, //实名认证

        system: true,
        system__out: true,
      };
    },


    created() {
      console.log('123');
      this.game_id = localStorage.getItem('game_id');
      this.game_name = localStorage.getItem('game_name');
      this.game_logo = localStorage.getItem('game_logo');

      this.userId = localStorage.getItem('user_id');
      this.pid = localStorage.getItem('pid');
      this.audit_status = localStorage.getItem('audit_status'); //审核状态，1：未提交，2：已提交 3：审核通过 4：审核失败

      if (this.audit_status != 3) {

        // 实名认证未通过
        this.toUrls('/center/PersonalCertificate')
        this.account = true;
        this.account__certificate = true;

        // this.log = true;
        // this.log__update = true;


      } else {
        if (this.pid > 0) {
          this.datum = true;
          this.datum__list = true;
          //子账号登录
          this.getPermInfo();

        } else {
          //主账号登录
          this.datum = true;
          this.datum__list = true;

          this.notice = true;
          this.notice__list = true;

          this.log = true;
          this.log__update = true;

          this.game = true;
          this.game__databaseCon = true;
          this.game__officialList = true;
          this.game__playerRechargeRecord = true;

          this.finance = true;
          this.finance__settlementInformation = true;
          this.finance__contract = true;
          this.finance__invoice = true;

          this.technical = true;
          this.technical__problem = true;
          this.technical__menuPerm = true;
          this.technical__workSub = true;
          this.technical__videoCourse = true;

          this.manpower = true;
          this.manpower__resource = true;

          this.account = true;
          this.account__bypass = true;
          this.account__personalm = true;
          this.account__certificate = true;

        }
      }


      var ty = localStorage.getItem('message_show')
      var path = window.location.pathname;



      console.log('ty111', ty);


      // // alert(ty)
      // alert(path)
      if (path == '/center/workSub') {
        if (this.mm == 1) {
          this.message_show = true;
        } else {
          this.message_show = false;
        }

      } else {
        var ty = localStorage.getItem('message_show')
        console.log('ty222', ty);
        if (ty == 1) {
          this.message_show = true;
        } else {
          this.message_show = false;
        }
      }




      // alert('000')


      // if (path !== '/center/workSub') {}


      // var path = this.$route.path
      // var path = window.location.href;
      // var path = window.location.pathname;


      // 创建 WebSocket 连接
      // this.socket = new WebSocket('ws://kf.gm.biqihuyu.net:2346');
      this.socket = new WebSocket('wss://kf.biqihuyu.com:2346');

      // 监听 WebSocket 事件
      this.socket.onopen = () => {
        console.log('WebSocket 连接已打开-sidebartss');
      };

      this.socket.onmessage = (event) => {
        var path = this.$router.currentRoute.path;

        // alert(111)
        // alert(path)
        this.message = event.data; // 接收到的消息
        var message_items = JSON.parse(this.message)


        if (message_items.type == 'init') {
          this.client_id = message_items.client_id
          this.binding();
        }

        if (message_items.type == 'message') {

          if (path == '/center/workSub') {
            this.message_show = false;
            localStorage.setItem('message_show', 0)
          } else {
            this.message_show = true;
            localStorage.setItem('message_show', 1)
            this.playSound();
          }

        }

      };

      this.socket.onclose = () => {
        console.log('WebSocket 连接已关闭');
      };

      this.socket.onerror = (error) => {
        console.error('WebSocket 错误:', error);
      };



    },
    methods: {

      childMethodSi() {
        this.mm = 2;
        console.log('childMethodSi')
        this.message_show = true;
      },
      handleWorkSubClick() {
        this.message_show = false;
      },
      toWai() {
        window.open("http:///doc.3kfz.com", "_blank");
      },
      //查询用户权限详情
      getPermInfo() {
        var p = {
          user_id: this.userId,
          product: 'biqi-developer-platform',
        };

        UserPermission.info(p).then(response => {
          var menu_permission = response.data.menu_permission;

          this.datum = menu_permission[0].datum;
          this.datum__list = menu_permission[1].datum__list;

          this.notice = menu_permission[2].notice;
          this.notice__list = menu_permission[3].notice__list;

          this.log = menu_permission[4].log;
          this.log__update = menu_permission[5].log__update;

          this.game = menu_permission[6].game;
          this.game__databaseCon = menu_permission[7].game__databaseCon;
          this.game__officialList = menu_permission[8].game__officialList;
          this.game__playerRechargeRecord = menu_permission[9].game__playerRechargeRecord;

          this.finance = menu_permission[10].finance;
          this.finance__settlementInformation = menu_permission[11].finance__settlementInformation;
          this.finance__contract = menu_permission[12].finance__contract;
          this.finance__invoice = menu_permission[13].finance__invoice;

          this.technical = menu_permission[14].technical;
          this.technical__problem = menu_permission[15].technical__problem;
          this.technical__menuPerm = menu_permission[16].technical__menuPerm;
          this.technical__workSub = menu_permission[17].technical__workSub;
          this.technical__videoCourse = menu_permission[18].technical__videoCourse;

          this.manpower = menu_permission[19].manpower;
          this.manpower__resource = menu_permission[20].manpower__resource;

          this.account = menu_permission[21].account;
          this.account__bypass = menu_permission[22].account__bypass;
          this.account__personalm = menu_permission[23].account__personalm;
          this.account__certificate = menu_permission[24].account__certificate;
          this.system = true;
          this.system__out = true;
          this.loading = false;
        });
      },
      playSound() {
        const audio = new Audio('https://bqresoffical.oss-cn-hangzhou.aliyuncs.com/uploads/2024_04_15/7d6412cd9fdc39bc5eaec61fb4cb9b7c.mp3');
        audio.play();
      },
      handleMenuSelect(index) {
        this.activeMenu = index; // 点击菜单项时更新选中的菜单项
        if (this.mm == 2) {
          this.message_show = false;
          localStorage.setItem('message_show', 0);
          this.mm = 1;
        }
        this.$emit('value-updated', index);


      },

      //绑定客户端
      binding() {
        var peres = {}
        peres.client = this.client_id
        peres.user = this.userId
        peres.type_pj = 1
        Work.Binding(peres).then((response) => {
          console.log('binding-sidebartss', response.data)
        });
      },

      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.$store.dispatch('LogOut').then(() => {
              localStorage.clear();
              location.href = '/index';
            });
          })
          .catch(() => {});
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

      handleClick(command) {
        var token = getToken();
        if (!token) {
          this.$message({
            message: '请先登录',
            type: 'warning'
          });
        }
        // this.$message('click on item ' + command);
        if (command == 'a') {
          this.toUrl('/center/PersonalCertificate');
        }

        if (command == 'd') {
          this.toUrl('/center/gameConfiguration');
        }
      },
      toUrl(url) {
        this.$emit('value-updated', '/center/dataAnalysis');
        this.$router.push({
          path: url
        });
      },


      toUrls(url) {
        this.$emit('value-updated', '/center/PersonalCertificate');
        this.$router.push({
          path: url
        });
      },

      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

<style>
  aside {
    padding: 0 !important;
    width: 220px !important;
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  .elmenu {
    // border-radius: 10px;
    // padding-top: 20px;
    height: 100vh;
    width: 100%;
    // background: red !important;
  }

  ::v-deep .el-submenu__title {
    font-size: 18px;
  }

  ::v-deep .el-menu-item.is-active {
    background: #779efe !important;
  }

  ::v-deep .el-menu-item * {
    font-size: 18px;
  }

  ::v-deep .el-menu-item.is-active {
    background: #779efe !important;
  }

  ::v-deep .el-menu .el-menu-item:hover {
    color: #10121a !important;
    background: #E8FEFF !important;
  }

  ::v-deep .el-menu .el-menu-item.is-active {
    color: #fff !important;
    background: #3FC1C9 !important;
  }

  .el-submenu ::v-deep .el-submenu__title:hover {
    color: #10121a !important;
    background: #E8FEFF !important;
  }

  .logon {
    margin-top: 50px;
    width: 72px;
    height: 72px;
    margin-left: 60px;
  }
</style>